<!DOCTYPE html>
<html><head>
<link type="text/css" rel="stylesheet" href="../css/jgraduate.css"/>
<style type="text/css">
	#grad_picker {
		display: none; 
	}
	.button {
		border-style: solid;
		border-width: 1px;
		border-color: darkgrey;
		background-color: white;
		width: 50px;
		height: 50px;
		cursor: pointer;
	}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.jgraduate.js"></script>
<script type="text/javascript">
	var ns = { svg: 'http://www.w3.org/2000/svg' };
	$(function() {
		function launchPicker(elem, g) {
			var pos = elem.position();
			// 
			$('#gradPicker').css({'left': pos.left, 'top': pos.top}).jGraduate(g,
				function() {
					if(g) {
						// update our global 'grad' variable with the new cloned gradient
						grad = document.importNode(this.gradient, true);
						grad.id = g.id;
						// replace the old gradient with the new one
						if(g.parentNode) {
							g.parentNode.replaceChild(grad, g);
						}
					}
					else {
						console.log(this.gradient);
					}
				});
		}
		
		var button = document.getElementById("button1");
		var svg = button.appendChild( document.createElementNS(ns.svg, 'svg') );
		svg.setAttribute('width', '50px');
		svg.setAttribute('height', '50px');
		svg.setAttribute('xmlns', ns.svg);
		svg.setAttribute('pointer-events', 'none');
		var grad = svg.appendChild( document.createElementNS(ns.svg, 'linearGradient') );
		grad.id = 'grad';
		var stop1 = grad.appendChild( document.createElementNS(ns.svg, 'stop') );
		stop1.setAttribute('stop-color', 'black');
		stop1.setAttribute('offset', '0.0');
		var stop2 = grad.appendChild( document.createElementNS(ns.svg, 'stop') );
		stop2.setAttribute('stop-color', 'red');
		stop2.setAttribute('offset', '1.0');
		var stop2 = grad.appendChild( document.createElementNS(ns.svg, 'stop') );
		var rect = svg.appendChild( document.createElementNS(ns.svg, 'rect') );
		rect.setAttribute('width', '100%');
		rect.setAttribute('height', '100%');
		rect.setAttribute('fill', 'url(#grad)');
		
		$('#button1').click(function() { launchPicker($(this),grad); });
		$('#button2').click(function() { launchPicker($(this)); });
	});
</script>
<title>jGraduate Test Page</title>
</head><body>
	<div id="gradPicker"></div>

	<p>This is a demo of the <a href="http://jgraduate.googlecode.com/">jGraduate jQuery plugin</a>.</p>

	<div id="button1" class="button"></div>	
	<p>Click the box to change the gradient.</p>
	<!--
	<div id="button2" class="button"></div>	
	<p>Click the box to change the gradient.</p>
	-->
</body></html>
